<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>古风剧情游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        ancient: {
                            red: '#9e2a2b',
                            gold: '#c9a86a',
                            brown: '#5c4033',
                            paper: '#f1e8d9',
                            dark: '#2d2327'
                        }
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .bg-paper-texture {
                background-image: url('https://picsum.photos/id/156/1000/1000');
                background-size: cover;
                background-blend-mode: overlay;
            }
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            }
            .stat-change-up {
                color: #22c55e; /* 绿色表示上升 */
            }
            .stat-change-down {
                color: #ef4444; /* 红色表示下降 */
            }
            .affinity-change-up {
                color: #8b5cf6; /* 紫色表示好感度上升 */
            }
            .affinity-change-down {
                color: #f97316; /* 橙色表示好感度下降 */
            }
        }
    </style>
</head>
<body class="bg-ancient-paper bg-paper-texture min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-ancient-brown/80 text-ancient-gold py-3 px-6 flex justify-between items-center">
        <div class="text-xl font-bold">古风剧情游戏</div>
        <button id="menuBtn" class="p-2 hover:bg-ancient-dark/30 rounded transition-colors">
            <i class="fa fa-cog text-xl"></i>
        </button>
    </header>

    <!-- 游戏主区域 -->
    <main class="flex-grow flex flex-col items-center justify-center p-6">
        <!-- 游戏标题和主菜单 -->
        <div id="titleScreen" class="text-center mb-10">
            <h1 class="text-[clamp(2rem,5vw,4rem)] text-ancient-red text-shadow">江湖奇缘</h1>
            <p class="text-ancient-brown mt-2">一段由你谱写的江湖传奇</p>
            <div class="flex flex-col gap-3 mt-6">
                <button id="startBtn" class="bg-ancient-red hover:bg-ancient-red/80 text-white font-bold py-3 px-8 rounded transition-all transform hover:scale-105">
                    开始新游戏
                </button>
                <button id="continueBtn" class="bg-ancient-brown hover:bg-ancient-brown/80 text-white font-bold py-3 px-8 rounded transition-all transform hover:scale-105" disabled>
                    继续游戏
                </button>
            </div>
        </div>

        <!-- 游戏剧情显示区域 -->
        <div id="storyArea" class="hidden mt-10 w-full max-w-2xl bg-white/80 p-6 rounded border-2 border-ancient-brown">
            <div id="storyText" class="text-ancient-dark mb-6"></div>
            
            <!-- 变化提示区域 -->
            <div id="changesArea" class="hidden mb-4 p-2 bg-ancient-gold/10 rounded"></div>
            
            <!-- 互动区域 (选择按钮或继续按钮) -->
            <div id="interactionArea" class="flex flex-col gap-3"></div>
            
            <!-- 掷骰结果显示 -->
            <div id="rollResult" class="hidden mt-4 p-3 bg-ancient-gold/20 rounded"></div>
        </div>
    </main>

    <!-- 底部信息 -->
    <footer class="bg-ancient-brown/80 text-ancient-gold py-2 px-6 text-center text-sm">
        古风剧情游戏 &copy; 2023
    </footer>

    <!-- 属性面板 (默认隐藏) -->
    <div id="menuPanel" class="fixed top-0 right-0 h-full w-64 bg-ancient-paper border-l-2 border-ancient-brown transform translate-x-full transition-transform duration-300 p-4 z-10">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-bold text-ancient-red">游戏设置</h2>
            <button id="closeMenuBtn" class="p-1 hover:bg-ancient-dark/20 rounded">
                <i class="fa fa-times"></i>
            </button>
        </div>

        <!-- 自身属性 -->
        <div class="mb-6">
            <h3 class="font-bold text-ancient-brown border-b border-ancient-brown pb-1 mb-2">自身属性</h3>
            <div id="statsList" class="space-y-1 text-sm">
                <div>武力: <span id="statStrength">7</span></div>
                <div>智谋: <span id="statWisdom">5</span></div>
                <div>魅力: <span id="statCharm">6</span></div>
                <div>敏捷: <span id="statAgility">4</span></div>
            </div>
        </div>

        <!-- 好感度 -->
        <div class="mb-6">
            <h3 class="font-bold text-ancient-brown border-b border-ancient-brown pb-1 mb-2">人物好感度</h3>
            <div id="affinityList" class="space-y-1 text-sm">
                <div>李逍遥: <span id="affinityLi">30</span>/100</div>
                <div>赵灵儿: <span id="affinityZhao">50</span>/100</div>
                <div>林月如: <span id="affinityLin">20</span>/100</div>
            </div>
        </div>

        <!-- BGM控制 -->
        <div class="mb-6">
            <h3 class="font-bold text-ancient-brown border-b border-ancient-brown pb-1 mb-2">BGM设置</h3>
            <div class="flex gap-2">
                <button id="playBgmBtn" class="px-3 py-1 bg-ancient-gold/70 hover:bg-ancient-gold rounded text-sm">
                    <i class="fa fa-play"></i> 播放
                </button>
                <button id="pauseBgmBtn" class="px-3 py-1 bg-ancient-gold/70 hover:bg-ancient-gold rounded text-sm">
                    <i class="fa fa-pause"></i> 暂停
                </button>
            </div>
        </div>

        <!-- 存档读档 -->
        <div class="mb-6">
            <h3 class="font-bold text-ancient-brown border-b border-ancient-brown pb-1 mb-2">存档管理</h3>
            <div class="space-y-2">
                <button id="saveBtn" class="w-full px-3 py-1 bg-ancient-red/80 hover:bg-ancient-red text-white rounded text-sm">
                    <i class="fa fa-save"></i> 保存游戏
                </button>
                <button id="loadBtn" class="w-full px-3 py-1 bg-ancient-red/80 hover:bg-ancient-red text-white rounded text-sm">
                    <i class="fa fa-folder-open"></i> 读取存档
                </button>
            </div>
        </div>

        <!-- 回到主页面 -->
        <div>
            <h3 class="font-bold text-ancient-brown border-b border-ancient-brown pb-1 mb-2">游戏控制</h3>
            <button id="returnToTitleBtn" class="w-full px-3 py-1 bg-ancient-brown/80 hover:bg-ancient-brown text-white rounded text-sm">
                <i class="fa fa-home"></i> 回到主页面
            </button>
        </div>
    </div>

    <script>
        // 游戏数据
        const gameData = {
            currentScene: 0,
            stats: {
                strength: 7,
                wisdom: 5,
                charm: 6,
                agility: 4
            },
            affinity: {
                li: 30,
                zhao: 50,
                lin: 20
            },
            scenes: [
                {
                    type: "text",
                    text: "江南三月，烟雨朦胧。你背着简单的行囊，踏上了前往金陵的路。这是你第一次离开家乡，心中既有对未来的憧憬，也有一丝不安。",
                    nextScene: 1
                },
                {
                    type: "text",
                    text: "走了约莫半日，前方出现了一个岔路口。一条路宽阔平坦，看起来是官道；另一条则蜿蜒曲折，通向一片竹林深处。",
                    nextScene: 2
                },
                {
                    type: "choice",
                    text: "你站在岔路口犹豫片刻，决定：",
                    choices: [
                        {
                            text: "走宽阔的官道，安全第一",
                            stat: "wisdom",
                            successScene: 3,
                            failScene: 4
                        },
                        {
                            text: "走竹林小径，或许能抄近路",
                            stat: "agility",
                            successScene: 5,
                            failScene: 6
                        }
                    ]
                },
                {
                    type: "text",
                    text: "你选择了官道，路面平整，行走轻松。沿途不时有商旅经过，你向一位老者打听前方路况，得知前面不远处有个小镇可以歇脚。",
                    nextScene: 7
                },
                {
                    type: "text",
                    text: "你选择了官道，但走了没多久，就遇到了路障——前方桥梁被洪水冲毁，无法通行。无奈之下，你只能回头走竹林小径。",
                    nextScene: 6
                },
                {
                    type: "text",
                    text: "你身手敏捷，在竹林中穿行自如。林中空气清新，还能听到鸟鸣。走了不到一个时辰，你就穿出了竹林，远远望见了一个小镇的轮廓。",
                    nextScene: 7
                },
                {
                    type: "text",
                    text: "你走进竹林，才发现路径复杂，杂草丛生。没走多久，你就迷了路，只能在林中打转。",
                    nextScene: 8
                },
                {
                    type: "text",
                    text: "终于抵达小镇，已是傍晚时分。你感到有些疲惫，打算找个地方落脚。小镇不大，只有一家客栈和几间杂货铺。",
                    nextScene: 9
                },
                {
                    type: "text",
                    text: "正当你焦急万分时，听到身后传来脚步声。回头一看，是一位身着青衫的书生，正拿着罗盘辨认方向。",
                    nextScene: 10
                },
                {
                    type: "choice",
                    text: "你走进客栈，店小二热情地迎了上来。此时你看到角落里坐着一位白衣女子，正独自望着窗外，神色忧郁。你决定：",
                    choices: [
                        {
                            text: "先找个位置坐下，点些饭菜",
                            stat: "wisdom",
                            successScene: 11,
                            failScene: 12
                        },
                        {
                            text: "上前与白衣女子搭话",
                            stat: "charm",
                            successScene: 13,
                            failScene: 14,
                            successChanges: [
                                {type: "affinity", target: "zhao", change: 5},
                                {type: "stat", stat: "charm", change: 1}
                            ],
                            failChanges: [
                                {type: "affinity", target: "zhao", change: -3}
                            ]
                        }
                    ]
                },
                {
                    type: "choice",
                    text: "书生看到你，拱手说道：「这位兄台，看你似乎迷路了？我也要去前面的小镇，不如同行？」",
                    choices: [
                        {
                            text: "欣然同意，与书生同行",
                            stat: "charm",
                            successScene: 15,
                            failScene: 16,
                            successChanges: [
                                {type: "stat", stat: "charm", change: 1},
                                {type: "stat", stat: "wisdom", change: 1},
                                {type: "affinity", target: "li", change: 8}
                            ],
                            failChanges: [
                                {type: "stat", stat: "charm", change: -1},
                                {type: "affinity", target: "li", change: -4}
                            ]
                        },
                        {
                            text: "婉言谢绝，独自寻找出路",
                            stat: "wisdom",
                            successScene: 17,
                            failScene: 18
                        }
                    ]
                }
            ]
        };

        // DOM元素
        const menuBtn = document.getElementById('menuBtn');
        const closeMenuBtn = document.getElementById('closeMenuBtn');
        const menuPanel = document.getElementById('menuPanel');
        const startBtn = document.getElementById('startBtn');
        const continueBtn = document.getElementById('continueBtn');
        const returnToTitleBtn = document.getElementById('returnToTitleBtn');
        const titleScreen = document.getElementById('titleScreen');
        const storyArea = document.getElementById('storyArea');
        const storyText = document.getElementById('storyText');
        const interactionArea = document.getElementById('interactionArea');
        const rollResult = document.getElementById('rollResult');
        const changesArea = document.getElementById('changesArea');
        const saveBtn = document.getElementById('saveBtn');
        const loadBtn = document.getElementById('loadBtn');
        const playBgmBtn = document.getElementById('playBgmBtn');
        const pauseBgmBtn = document.getElementById('pauseBgmBtn');

        // 检查是否有存档，更新继续游戏按钮状态
        function checkSaveData() {
            const hasSave = localStorage.getItem('ancientGameSave') !== null;
            continueBtn.disabled = !hasSave;
            continueBtn.classList.toggle('opacity-50', !hasSave);
        }

        // 更新属性和好感度显示
        function updateDisplays() {
            // 更新属性显示
            document.getElementById('statStrength').textContent = gameData.stats.strength;
            document.getElementById('statWisdom').textContent = gameData.stats.wisdom;
            document.getElementById('statCharm').textContent = gameData.stats.charm;
            document.getElementById('statAgility').textContent = gameData.stats.agility;
            
            // 更新好感度显示
            document.getElementById('affinityLi').textContent = gameData.affinity.li;
            document.getElementById('affinityZhao').textContent = gameData.affinity.zhao;
            document.getElementById('affinityLin').textContent = gameData.affinity.lin;
        }

        // 应用变化并显示提示
        function applyChanges(changes) {
            if (!changes || changes.length === 0) {
                changesArea.classList.add('hidden');
                return;
            }
            
            let changesHtml = "";
            changes.forEach(change => {
                if (change.type === "stat") {
                    // 应用属性变化
                    gameData.stats[change.stat] += change.change;
                    // 确保属性不会低于1
                    if (gameData.stats[change.stat] < 1) {
                        gameData.stats[change.stat] = 1;
                    }
                    
                    // 构建属性变化提示
                    const className = change.change > 0 ? "stat-change-up" : "stat-change-down";
                    const symbol = change.change > 0 ? "+" : "";
                    changesHtml += `<span class="${className}">${change.stat}: ${symbol}${change.change}</span> `;
                } 
                else if (change.type === "affinity") {
                    // 应用好感度变化
                    gameData.affinity[change.target] += change.change;
                    // 确保好感度在0-100之间
                    if (gameData.affinity[change.target] < 0) {
                        gameData.affinity[change.target] = 0;
                    }
                    if (gameData.affinity[change.target] > 100) {
                        gameData.affinity[change.target] = 100;
                    }
                    
                    // 构建好感度变化提示
                    const charName = change.target === "li" ? "李逍遥" : 
                                   change.target === "zhao" ? "赵灵儿" : "林月如";
                    const className = change.change > 0 ? "affinity-change-up" : "affinity-change-down";
                    const symbol = change.change > 0 ? "+" : "";
                    changesHtml += `<span class="${className}">${charName}好感度: ${symbol}${change.change}</span> `;
                }
            });
            
            changesArea.innerHTML = changesHtml;
            changesArea.classList.remove('hidden');
            updateDisplays();
        }

        // 显示当前场景
        function showScene(sceneIndex) {
            if (sceneIndex >= gameData.scenes.length) {
                storyText.textContent = "剧情尚未完成，敬请期待...";
                interactionArea.innerHTML = "";
                changesArea.classList.add('hidden');
                return;
            }
            
            const scene = gameData.scenes[sceneIndex];
            gameData.currentScene = sceneIndex;
            
            storyText.textContent = scene.text;
            interactionArea.innerHTML = "";
            
            // 应用并显示变化（如果有的话）
            applyChanges(scene.changes);
            
            // 根据场景类型显示不同的互动元素
            if (scene.type === "text") {
                const continueBtn = document.createElement('button');
                continueBtn.className = "bg-ancient-brown/80 hover:bg-ancient-brown text-white py-2 px-4 rounded transition-colors self-end";
                continueBtn.textContent = "继续";
                continueBtn.onclick = () => showScene(scene.nextScene);
                interactionArea.appendChild(continueBtn);
            } else if (scene.type === "choice") {
                scene.choices.forEach((choice, index) => {
                    const button = document.createElement('button');
                    button.className = "bg-ancient-brown/80 hover:bg-ancient-brown text-white py-2 px-4 rounded text-left transition-colors";
                    button.textContent = choice.text;
                    button.onclick = () => makeChoice(index);
                    interactionArea.appendChild(button);
                });
            }
        }

        // 回到主页面
        function returnToTitle() {
            storyArea.classList.add('hidden');
            titleScreen.classList.remove('hidden');
            menuPanel.classList.add('translate-x-full');
            checkSaveData(); // 回到主页面时检查存档状态
        }

        // 掷骰子函数
        function rollDice() {
            return Math.floor(Math.random() * 10) + 1;
        }

        // 做出选择
        function makeChoice(choiceIndex) {
            const scene = gameData.scenes[gameData.currentScene];
            const choice = scene.choices[choiceIndex];
            const statValue = gameData.stats[choice.stat];
            
            // 掷骰子
            const roll = rollDice();
            
            // 显示掷骰结果
            rollResult.textContent = `你进行了${choice.stat}判定: 掷出 ${roll} 点 (需要 ≤ ${statValue})`;
            rollResult.classList.remove('hidden');
            
            // 判断成功或失败，决定下一个场景和变化
            const isSuccess = roll <= statValue;
            const nextScene = isSuccess ? choice.successScene : choice.failScene;
            const changes = isSuccess ? choice.successChanges : choice.failChanges;
            
            // 短暂延迟后处理结果
            setTimeout(() => {
                rollResult.classList.add('hidden');
                // 应用选择带来的变化（如果有的话）
                applyChanges(changes);
                // 短暂延迟后显示下一场景
                setTimeout(() => {
                    showScene(nextScene);
                }, 1000);
            }, 2000);
        }

        // 保存游戏
        function saveGame() {
            localStorage.setItem('ancientGameSave', JSON.stringify(gameData));
            alert('游戏已保存！');
            checkSaveData(); // 保存后更新继续按钮状态
        }

        // 读取存档
        function loadGame() {
            const savedData = localStorage.getItem('ancientGameSave');
            if (savedData) {
                Object.assign(gameData, JSON.parse(savedData));
                updateDisplays();
                titleScreen.classList.add('hidden');
                storyArea.classList.remove('hidden');
                showScene(gameData.currentScene);
                alert('已加载存档！');
            } else {
                alert('没有找到存档！');
            }
        }

        // 开始新游戏
        function startNewGame() {
            // 重置游戏数据
            gameData.currentScene = 0;
            gameData.stats = {
                strength: 7,
                wisdom: 5,
                charm: 6,
                agility: 4
            };
            gameData.affinity = {
                li: 30,
                zhao: 50,
                lin: 20
            };
            
            updateDisplays();
            titleScreen.classList.add('hidden');
            storyArea.classList.remove('hidden');
            showScene(0);
        }

        // 事件监听
        menuBtn.addEventListener('click', () => {
            menuPanel.classList.remove('translate-x-full');
        });

        closeMenuBtn.addEventListener('click', () => {
            menuPanel.classList.add('translate-x-full');
        });

        startBtn.addEventListener('click', startNewGame);
        
        continueBtn.addEventListener('click', loadGame);
        
        returnToTitleBtn.addEventListener('click', () => {
            if (confirm('确定要回到主页面吗？当前进度将会保存。')) {
                saveGame();
                returnToTitle();
            }
        });

        saveBtn.addEventListener('click', saveGame);
        loadBtn.addEventListener('click', loadGame);

        playBgmBtn.addEventListener('click', () => {
            alert('BGM播放中...');
        });

        pauseBgmBtn.addEventListener('click', () => {
            alert('BGM已暂停');
        });

        // 初始化
        updateDisplays();
        checkSaveData();
    </script>
</body>
</html>
    